<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<title>JUL + Ample SDK Example</title>
	<style type="text/css">
	html, body {
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
		background-color: #fff;
	}
	body * {
		font-family:  "Helvetica",Helvetica, sans-serif;
		font-size: 13px;
		color: #111;
	}
	#content {
		width: 960px;
		height: 580px;
		margin: 10px auto;
		padding: 15px 25px;
		text-align: center;
	}
	#footer {
		text-align: center;
		font-size: x-small;
	}
	</style>
	<script type="text/javascript" src="../js/jul.min.js"></script>
	<script type="text/javascript" src="https://googledrive.com/host/0B9zLzpZ-06uFY1A2OG5Dd0k3TW8/ample-sdk/ample/runtime.js"></script>
	<script type="text/javascript" src="https://googledrive.com/host/0B9zLzpZ-06uFY1A2OG5Dd0k3TW8/ample-sdk/ample/languages/xul/xul.js"></script>
	<script type="text/javascript" src="https://googledrive.com/host/0B9zLzpZ-06uFY1A2OG5Dd0k3TW8/ample-sdk/ample/languages/xhtml/xhtml.js"></script>
	<script type="text/javascript" src="https://googledrive.com/host/0B9zLzpZ-06uFY1A2OG5Dd0k3TW8/ample-sdk/ample/languages/svg/svg.js"></script>
	<script type="text/javascript" src="https://googledrive.com/host/0B9zLzpZ-06uFY1A2OG5Dd0k3TW8/ample-sdk/ample/languages/chart/chart.js"></script>
	<link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0B9zLzpZ-06uFY1A2OG5Dd0k3TW8/ample-sdk/ample/languages/xul/themes/default/style-prod.css" />
	<link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0B9zLzpZ-06uFY1A2OG5Dd0k3TW8/ample-sdk/ample/languages/chart/themes/default/style-prod.css" />
</head>
<body>
<div id="content">
	<p>JUL example using <a target="_blank" href="http://www.amplesdk.com/">Ample SDK</a> 
	to render the component tree.
	</p>
</div>
	<div id="footer">
  <script type="text/javascript">
  document.write('Copyright &copy; 2012 - ' + (new Date()).getFullYear() + ' The Zonebuilder. Powered by JUL ' + JUL.version);
  </script>
	</div>
	<script type="text/javascript">
	// define application namespace
	JUL.ns('APP.ui');
	JUL.apply(APP, {
		version: '1.0'
	});

	// build the config tree for the main XUL dialog
	APP.ui.components = {
		tag: 'dialog',
		// a dotted ID means publishing the component under that namespace
		id: 'APP.mainWindow',
		title: 'JUL + Ample SDK Dialog',
		css: 'main-dialog',
		width: 610,
		height: 333,
		buttons: 'accept,cancel',
		context: 'none',
		hidden: true,
		commandset: [
			{tag: 'command', id: 'cmd-more-info', label: 'More info ...'}
		],
		children: [
			{tag: 'tabbox', selectedIndex: 0, tabs: [
				{tag: 'tab', label: 'XUL+SVG'},
				{tag: 'tab', label: 'Chart'},
				{tag: 'tab', label: 'Custom tab'}
			]}
		]
	};

	// preoaring ab array of items for the listbox config
	var aItems = [];
		for (var n = 1; n < 11; n++) {
			aItems.push({tag: 'listitem', children: [
				{tag: 'listcell', label: 'First ' + n},
				{tag: 'listcell', label: 'Last ' + n}
			]});
		}
	
	// add all tabpanel configs
	APP.ui.components.children[0].tabpanels = [{
		tag: 'tabpanel',
		orient: 'vertical',
		// using compact form for a DOM config tree - where container elements can be 'members' properties
		hbox: [
			{tag: 'image', src: '../media/shield.jpg'},
			{tag: 'description', value: 'Register online!', style: 'font-weight:bold;padding:15px', flex: 1},
			// container for the SVG tree
			{xclass:'html', tag: 'div', id: 'APP.svgBox'}
		],
		// using default 'members' property i.e. 'children'
		children: [
			{tag: 'listbox', id: 'list-names', seltype: 'single', height: 99, listhead: [
				{tag: 'listheader', label: 'First Name', width: 200, tooltiptext: 'First Name'},
				{tag: 'listheader', label: 'Last Name', width: 200, tooltiptext: 'Last Name'}
			],
			// assign listbody to the array constructed before
			listbody: aItems
			}
		],
		groupbox: [
			{tag: 'caption', label: 'Your information'},
			{tag: 'vbox', children: [
				{tag: 'hbox', children: [
					{tag: 'label', control:'register-firstname', value: 'Enter your first name', flex: 1},
					{tag: 'textbox', id: 'register-firstname', flex: 1}
				]},
				{tag: 'hbox', children: [
					{tag: 'label', control: 'register-lastname', value: 'Enter your last name', flex: 1},
					{tag: 'textbox', id: 'register-lastname', flex: 1}
				]},
				{tag: 'hbox', children: [
					{tag: 'button', command: 'cmd-more-info', flex: 1}
				]}
			]}
		]
	}, {
		tag: 'tabpanel',
		orient: 'vertical',
		children: [
			// container for the Ample Chart tree
			{xclass:'html', tag: 'div', id: 'APP.chartBox'}
		]
	}, {
		tag: 'tabpanel',
		// include a config specified by its namespace path
		include: 'APP.ui.customTab',
		// the properties below overwrite those included
		id: 'custom-tab',
		css: 'custom-class',
		orient: 'vertical'
	}];
	
	// creating a config object used as included config
	APP.ui.customTab = {
		tag: 'tabpanel',
		children: [
			// another inclusiob
			{tag: 'description', include: 'APP.ui.copy'}
		],
		groupbox: [
			{tag: 'caption', label:'Content'},
			{include: 'APP.ui.hbox'},
			// the binding property 'cid' is used to link UI with the logic config
			{tag: 'button', cid: 'Button.test', label: 'Test me!'}
		]
	};
	
	// this is a logic config - see tge correspondence of the property 'Button.test'
	APP.test = {
		'Button.test': {
			listeners: {
			// the DOM creating factory also accepts listeners as namespace paths
			click: 'APP.doTest'
		}}
	};
	
	// define a listener for the 'Test me!' button
	APP.doTest = function() {
		alert('This is a test!');
	};
	
	// another member used as included config
	APP.ui.hbox = {
		tag: 'hbox',
		children: [
			{tag: 'label', value: 'Left line', flex: 1},
				{tag: 'label', value: 'Right line', flex: 1}
		]
	};
	
	// testing HTML entities
	APP.ui.copy = {html: '&copy; Copyright Note'};
	
	// this is the logic config for the application UI - see the correspondence between its properties and the component IDs
	APP.ui.bindings = {
		// it also supports the inlcusion of an array of logic configs
		include: ['APP.test'],
		'APP.mainWindow': {listeners: {
			// inline listeners for the main dialog
			dialogaccept: function() {
				alert('Please fill the required info!');
				return false;
			},
			dialogcancel: function() {
				alert("Won't close for now.");
				return false;
			}
		}},
		// listener for the XUL command element
		'cmd-more-info': {listeners: {
			command: function() {
				alert('JUL example with different DOM component trees (XUL, SVG, Ample Chart)');
			}
		}}
	};
	
	// SVG config tree
	APP.ui.svg = {
		tag: 'svg',
		width: '100px',
		height: '100px',
		viewBox: '0 0 100 100',
		g: [
			{tag: 'circle', cx: 50, cy: 50, r: 48, fill: 'none', stroke: '#000'},
  			{tag: 'path', d: 'M50,2a48,48 0 1 1 0,96a24 24 0 1 1 0-48a24 24 0 1 0 0-48'},
  			{tag: 'circle', cx: 50, cy: 26, r: 6},
  			{tag: 'circle', cx: 50, cy: 74, r: 6, fill: '#FFF'}
  		]
	};
	
	// Ample Chart config tree
	APP.ui.chart = {
		tag: 'bar', title: 'Column chart', orient: 'vertical',
			xAxisLabel: 'X Axis', yAxisLabel: 'Y Label',
			xAxisValueLabels: '1999,2000,2001,2002,2003', children: [
			{tag: 'group', label: 'Set 0', children: [
				{tag: 'item', value: 10},
				{tag: 'item', value: 20},
				{tag: 'item', value: 30},
				{tag: 'item', value: 40},
				{tag: 'item', value: 50}
			]},
			{tag: 'group', label: 'Set 1', children: [
				{tag: 'item', value: 20},
				{tag: 'item', value: 10},
				{tag: 'item', value: 25},
				{tag: 'item', value: 45},
				{tag: 'item', value: 15}
			]},
			{tag: 'group', label: 'Set 2', children: [
				{tag: 'item', value: 30},
				{tag: 'item', value: 30},
				{tag: 'item', value: 5},
				{tag: 'item', value: 10},
				{tag: 'item', value: 40}
			]},
			{tag: 'group', label: 'Set 3', children: [
				{tag: 'item', value: 15},
				{tag: 'item', value: 25},
				{tag: 'item', value: 35},
				{tag: 'item', value: 30},
				{tag: 'item', value: 10}
			]}
		]
	};
	
	// change defaults the will be inherited by the bew parsers - all will treat configs as DOM element configs
	JUL.UI.useTags = true;
	// wait for Ample to ne ready
	ample.ready(function() {
		// new parser for the XUL tree
		var oParser = new JUL.UI.Parser({
			// the 'JUL.UI.createDom' factory as the custom factory
			customFactory: JUL.UI.createDom,
			// all elements created with XUL XML namespace
			defaultClass: 'xul',
			// all of these properties are treated as container configs i.e. parsed for member configs
			membersProperties: ['commandset', 'hbox', 'vbox',
				'groupbox', 'tabs', 'tabpanels', 'listhead', 'listbody'],
			// using the top-down instantiation instead of the default bottom-up one
			topDown: true
		});
		// create the component tree with bounded logic, the root will be published as 'APP.mainWindow'
		// when instantiating top-down, the 'APP.ui.components' needs to be normalized (expanded) 
		// in order for the 'JUL.UI.createDom' to create container elements for the compacted members
		oParser.create(oParser.expand(APP.ui.components), APP.ui.bindings);
		// add the DOM element to the Ample document element
		ample.documentElement.appendChild(APP.mainWindow);
		// new parser for the SVG tree
		var oSvgParser = new JUL.UI.Parser({
			customFactory: 'JUL.UI.createDom',
			defaultClass: 'svg',
			membersProperties: ['g']
		});
		var oSvg = oSvgParser.create(APP.ui.svg);
		// 'APP.svgBox' element was published with the creation of the dialog
		APP.svgBox.appendChild(oSvg);
		// new parser for the Ample Chart tree
		var oChartParser = new JUL.UI.Parser({
			customFactory: JUL.UI.createDom,
			defaultClass: 'chart'
		});
		var oChart = oChartParser.create(APP.ui.chart);
		// 'APP.chartBox' element was published with the creation of the dialog
		APP.chartBox.appendChild(oChart);
		// show the main dialog
		APP.mainWindow.show();
	});
	</script>
</body>
</html>
